<template>
  <pull-refresh v-model="refreshing" @refresh="onRefresh">
    <list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <template v-for="(item, i) in list">
        <div class="itemWrap" :key="i" @click="navToDetail(item)">
          <div class="item-left">
            <h1>
              {{ item.buildName }} {{ item.floorName }}
              {{ item.areaName || "" }}
            </h1>
            <div>告警类型：{{ item.alarmEqptSecondTypeName }}</div>
            <div>告警时间：{{ item.reportTime }}</div>
          </div>
          <div class="item-right">
            <van-button
              icon="arrow"
              type="primary"
              @click="navToDetail(item)"
            ></van-button>
          </div>
        </div>
      </template>
    </list>
  </pull-refresh>
</template>

<script>
import { List, PullRefresh, Button } from "vant";
export default {
  props: ["changeSearch"],
  watch: {
    changeSearch: {
      handler(v) {
        if (v) {
          this.onRefresh();
          this.$emit("changeSearchBack", false);
        }
      }
    }
  },
  components: {
    List,
    PullRefresh,
    VanButton: Button
  },
  data() {
    return {
      pageInfo: {
        pageNum: 0,
        pageSize: 10
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  methods: {
    navToDetail(item) {
      this.$router.push({
        path: "/home/alarmDetail",
        query: {
          data: JSON.stringify(item)
        }
      });
    },
    onLoad() {
      setTimeout(() => {
        this.pageInfo.pageNum++;
        this.$emit("getList", this.pageInfo, res => {
          console.log(res, 'res')
          if (res.length) {
            this.list = res;
          }
          this.loading = false;
          if (res.length < this.pageInfo.pageSize) {
            this.finished = true;
          }
          // if (this.list.length >= 40) {
          //   this.finished = true
          // }
        });
      }, 1000);
    },
    onRefresh() {
      this.pageInfo.pageNum = 0;
      this.list = [];
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
      this.refreshing = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.itemWrap {
  width: 100%;
  height: 150px;
  padding: 5%;
  box-sizing: border-box;
  border-radius: 5px;
  background: url("../../../assets/images/Alarm/contentBg.png") no-repeat right;
  background-size: auto 100%;
  /*box-shadow: 0px 1px 2px 0px #cccccc;*/
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item-left {
    width: 70%;
    h1 {
      font-size: 18px;
    }
    div {
      font-size: 13px;
      font-weight: 500;
      color: #666666;
      margin-top: 20px;
    }
  }
  .item-right {
    width: 20%;
    .van-button--primary {
      background-color: transparent;
      border: none;
      color: #666666;
      font-size: 20px;
    }
  }
}
</style>
